<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS渐变</title>
    <link rel="stylesheet" href="../libs/bootstrap/css/bootstrap.min.css">
    <style>
        .linear-gradient {
            width: 180px;
            height: 50px;
        }
        .radial-gradient{
            width: 180px;
            height: 180px;
        }

        .repeat-linear-gradient{
            width: 180px;
            height: 90px;
        }

        .panel:nth-child(1) .linear-gradient {
            background-image: linear-gradient(yellow, #D5D500 50%,yellow);
        }

        .panel:nth-child(2) .linear-gradient {
            background-image: linear-gradient(yellow, green,red,blue);
        }

        .panel:nth-child(3) .linear-gradient {
            background-image: linear-gradient(0,yellow, green);
        }

        .panel:nth-child(4) .linear-gradient {
            background-image: linear-gradient(90deg,yellow, green);
        }

        .panel:nth-child(5) .linear-gradient {
            background-image: linear-gradient(180deg,yellow, green);
        }


        .panel:nth-child(6) .linear-gradient {
            background-image: linear-gradient(45deg,yellow, green);
        }

        .panel:nth-child(7) .linear-gradient {
            background-image: linear-gradient(to bottom,yellow, green);
        }


        .panel:nth-child(8) .linear-gradient {
            background-image: linear-gradient(to right bottom,yellow, green);
        }


        .panel:nth-child(9) .linear-gradient {
            background-image: linear-gradient(to right,yellow 20%, green 40%);
        }

        /*径向渐变*/
        /*1. 辐射范围  2. 中心点  3.颜色的起止*/
        .panel:nth-child(10) .radial-gradient {
            background-image: radial-gradient(yellow,green);
        }

        /*中心位置参数设置 ： 方向（top left bottom right center）  px*/
        .panel:nth-child(11) .radial-gradient {
            background-image: radial-gradient( 90px at center center,yellow,green);
        }

        /*重复渐变   线性重复*/
        .panel:nth-child(12) .repeat-linear-gradient {
            background-image: repeating-linear-gradient(yellow 30%,green 60%);
        }


        .panel:nth-child(13) .repeat-linear-gradient {
            height: 180px;
            background-image: repeating-radial-gradient(yellow 10%,green 40%);
        }
    </style>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>CSS渐变</h1>
    </div>
    <div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3>垂直的线性渐变</h3>
            </div>
            <div class="panel-body">
                <div class="linear-gradient"></div>
            </div>
        </div>


        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3>多个颜色的渐变</h3>
            </div>
            <div class="panel-body">
                <div class="linear-gradient"></div>
            </div>
        </div>


        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3>用角度确定方向 0°</h3>
            </div>
            <div class="panel-body">
                <div class="linear-gradient"></div>
            </div>
        </div>


        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3>用角度确定方向 90°</h3>
            </div>
            <div class="panel-body">
                <div class="linear-gradient"></div>
            </div>
        </div>


        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3>用角度确定方向 180°</h3>
            </div>
            <div class="panel-body">
                <div class="linear-gradient"></div>
            </div>
        </div>


        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3>用角度确定方向 45°</h3>
            </div>
            <div class="panel-body">
                <div class="linear-gradient"></div>
            </div>
        </div>


        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3>用关键字来确定方向   向下</h3>
            </div>
            <div class="panel-body">
                <div class="linear-gradient"></div>
            </div>
        </div>

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3>用关键字来确定方向  右下角</h3>
            </div>
            <div class="panel-body">
                <div class="linear-gradient"></div>
            </div>
        </div>


        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3>控制渐变宽度</h3>
            </div>
            <div class="panel-body">
                <div class="linear-gradient"></div>
            </div>
        </div>


        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3>径向渐变</h3>
            </div>
            <div class="panel-body">
                <div class="radial-gradient"></div>
            </div>
        </div>


        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3>改变径向渐变大小</h3>
            </div>
            <div class="panel-body">
                <div class="radial-gradient"></div>
            </div>
        </div>


        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3>重复渐变☞线性重复</h3>
            </div>
            <div class="panel-body">
                <div class="repeat-linear-gradient"></div>
            </div>
        </div>



        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3>重复渐变☞径向重复</h3>
            </div>
            <div class="panel-body">
                <div class="repeat-linear-gradient"></div>
            </div>
        </div>



    </div>
</div>
</body>
</html>